<template>

    <div>
  
    <el-form :inline="true">
    <el-form-item label="员工名称">
        <el-input v-model="searchMap.employeeName" placeholder=""></el-input>
    </el-form-item>
      <el-button type="primary" @click="fetchData()">查询</el-button>
      <el-button type="primary" @click="handleEdit('')">新增</el-button>
    </el-form>
    <!--表格组件-->
     <el-table
        :data="list"
        style="width: 100%">
         <!--prop 后端返回的json数据的字段名-->
      <el-table-column prop="username" label="用户名" ></el-table-column>
      <el-table-column prop="employeeName" label="员工名称" ></el-table-column>
      <el-table-column prop="gender" label="性别" ></el-table-column>
      <el-table-column prop="deptName" label="部门名称" ></el-table-column>
      <el-table-column prop="phone" label="电话号码" ></el-table-column>
      <el-table-column prop="hireDate" label="入职时间" ></el-table-column>
      <el-table-column prop="termDate" label="离职时间" ></el-table-column>
      <el-table-column prop="address" label="家庭地址" ></el-table-column>
      <el-table-column prop="status" label="状态" ></el-table-column>
      
      <el-table-column
        fixed="right"   
        label="操作"
      width="100">
      <template slot-scope="scope">
        <el-button @click="handleEdit(scope.row.employeeId)" type="text" size="small">修改</el-button>
        <el-button @click="handleDelete(scope.row.employeeId)" type="text" size="small">删除</el-button>
      </template>
      </el-table-column>
     </el-table>

     <el-pagination
     @size-change="sizeData"
     @current-change="pageData"
     :page-sizes="[10,20,30,60]"
     :page-size="10"
     layout="total, sizes, prev, pager, next, jumper"
     :total="count">
   </el-pagination>

   <el-dialog title="编辑" :visible.sync="dialogFormVisible">
    <el-form label-width="80px">

      <el-form-item label="用户名"><el-input v-model="pojo.username" /></el-form-item>
      <el-form-item label="用户类型"><el-input v-model="pojo.role" /></el-form-item>
      <el-form-item label="员工名称"><el-input v-model="pojo.employeeName" /></el-form-item>
      <el-form-item label="性别"><el-input v-model="pojo.gender" /></el-form-item>
      <el-form-item label="部门名称"><el-input v-model="pojo.deptName" /></el-form-item>
      <el-form-item label="电话号码"><el-input v-model="pojo.phone" /></el-form-item>
      <el-form-item label="入职时间"><el-input v-model="pojo.hireDate" /></el-form-item>
      <el-form-item label="离职时间"><el-input v-model="pojo.termDate" /></el-form-item>
      <el-form-item label="家庭地址"><el-input v-model="pojo.address" /></el-form-item>

      <el-button type="primary" @click="handleSave()">保存</el-button>
      <el-button @click="dialogFormVisible = false">关闭</el-button>
    </el-form>
  </el-dialog>


    </div>

  </template>
<script>
          
        import employeeApi from '@/api/employee'

         export default {
            data() {
                 return{
                    //页面数据
                    list:[],
                    //查询条件
                    searchMap:{
                      pageNo:1,
                      pageSize:10,
                      employeeName:""
                    },
                    count:0,
                    pojo:{
                      status:1
                    },
                    dialogFormVisible:false,
                    id:''
                 }
            },
            created(){
                //在创建vue实例后触发钩子函数
                this.fetchData()
            },
            methods:{

                fetchData(){

                    //发起axios请求  获取后端的数据，赋值给模型
                    employeeApi.search(this.searchMap).then(response=>{
                        this.list=response.data.list
                        this.count=response.data.total
                    })

                },
                sizeData(size){
                  this.searchMap.pageSize=size
                  this.fetchData()
                },
                pageData(page){
                  this.searchMap.pageNo=page
                  this.fetchData()
                },
                //新增和修改使用同一个方法打开对话框
                handleEdit(id){
                  this.dialogFormVisible=true
                  this.id=id
                  if(id!==''){
                    employeeApi.find(id).then(response=>{              
                      if (response.data && response.data.length > 0) {
                        this.pojo = response.data[0];
                        } else {
                        this.pojo = {}; // 清空数据，防止意外情况
                        }
                    })
                  }else{
                    this.pojo={}  //清空数据
                   }
                },
                handleDelete(id){
                  this.$confirm('您确定要删除吗?', '提示', {
                      confirmButtonText: '确定',
                      cancelButtonText: '取消',
                      type: 'warning'
                    }).then(() => {
                      
                      drugApi.delete(id).then(response=>{
                          this.$message({
                          type: 'success',
                          message: '删除成功!'
                        });
                        this.fetchData()
                      })

                    }).catch(() => {
                      this.$message({
                        type: 'info',
                        message: '已取消删除'
                      });          
                    });

                  },
                //新增修改对话框的保存方法
                handleSave(){
                  if(this.id===null||this.id===''){//如果不带id就是新增
                    drugApi.save(this.pojo).then(response=>{
                      //弹窗
                      this.$message({
                        message:response.msg,
                        type:'scuccess'
                      })
                      //重新加载列表
                      this.fetchData()

                      //关闭弹窗
                      this.dialogFormVisible=false
                    })
                
                  }else{
                    drugApi.update(this.pojo).then(response=>{
                      //弹窗
                      this.$message({
                        message:response.msg,
                        type:'scuccess'
                      })
                      //重新加载列表
                      this.fetchData()

                      //关闭弹窗
                      this.dialogFormVisible=false
                    })
                  }
                }

            }
          }

</script>